<template>
    <div>
        <div class="container">
            <h1>每日统计</h1>
            <el-divider></el-divider>
            <!-- 日期选择框开始 -->
            <div class="date">
                <el-select
                    v-model="select_company"
                    slot="prepend"
                    placeholder="请选择"
                    clearable
                    @clear="select_reset"
                    style="width: 100px"
                >
                    <el-option label="京东快递" value="京东快递"></el-option>
                    <el-option label="顺丰快递" value="顺丰快递"></el-option>
                    <el-option label="圆通快递" value="圆通快递"></el-option>
                    <el-option label="中通快递" value="中通快递"></el-option>
                    <el-option label="申通快递" value="申通快递"></el-option>
                    <el-option label="韵达快递" value="韵达快递"></el-option>
                    <el-option label="天天快递" value="天天快递"></el-option>
                    <el-option label="EMS" value="EMS"></el-option>
                </el-select>
                <el-date-picker
                    v-model="time"
                    align="right"
                    clearable
                    @change="time_reset"
                    type="date"
                    placeholder="选择日期"
                    :picker-options="pickerOptions"
                >
                </el-date-picker>
                <el-button type="primary" icon="el-icon-search" @click="handleSearch()">搜索</el-button>
                <el-button type="primary" @click="sum" style="margin-left: 60%"> ￥ 今日结算</el-button>
            </div>
            <!-- 日期选择框结束 -->
            <!-- 每日统计开始 -->

            <el-table
                :data="everyDayList.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
                style="width: 100%; margin-top: 15px"
                stripe
            >
                <el-table-column type="expand">
                    <!-- 展开项开始 -->
                    <template slot-scope="props">
                        <el-form label-position="left" inline class="demo-table-expand" label-width="300px;">
                            <el-form-item label="入库收入:">
                                <span>￥<span>{{ props.row.in_price }}</span> 元</span>
                            </el-form-item>
                            <el-form-item label="寄件收入:">
                                <span>￥<span>{{ props.row.mail_price }}</span>  元</span>
                            </el-form-item>
                            <el-form-item label="总收入（入库+寄件）:" >
                                <span>￥<span>{{ props.row.price }}</span>  元</span>
                            </el-form-item>
                            <!-- <el-form-item label="总支出:">
                                <span>{{ props.row.pay }} 元</span>
                            </el-form-item> -->
                            <el-form-item label="利  润:">
                                <span>￥<span>{{ props.row.profit }} </span> 元</span>
                            </el-form-item>
                        </el-form>
                    </template>
                </el-table-column>
                <!-- 展开项结束 -->
                <el-table-column type="index" label="序号" width="50"></el-table-column>
                <el-table-column label="公司名称" prop="company_name"></el-table-column>
                <el-table-column label="入库量" sortable prop="import_num"></el-table-column>
                <el-table-column label="出库量" sortable prop="export_num"></el-table-column>
                <el-table-column label="拒签量" sortable prop="refuse_num"></el-table-column>
                <el-table-column label="寄件量" sortable prop="mail_num"></el-table-column>
                <el-table-column label="时间"  sortable prop="time"></el-table-column>
            </el-table>
            <!-- 分页 -->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="currentPage"
                :page-sizes="[5, 10, 30, 45, 60, 75]"
                :page-size="15"
                layout="total, sizes, prev, pager, next, jumper"
                :total="length"
                style="margin-left: 35%;  margin-top: 20px"
            ></el-pagination>
        </div>
        <!-- 每日统计结束 -->
    </div>
</template>
<script>
export default {
    // vue名字
    name: 'EveryDay', // 数据
    data() {
        return {
            //总数
            length: 0, //初始页
            currentPage: 1, //初始页大小
            pagesize: 5,
            everyDayList: {
                company_id: '', //公司编号
                company_name: '', //公司名称
                import_num: '', //入库数量
                export_num: '', //出库数量
                mail_num: '', //寄出数量
                  refuse_num: '', //拒签数量
                time: '', //时间
                in_price: 0, //入库快件收入
                mail_price: 0, //寄件支出
                // pay: 0 , //总支出
                price: 0, //总收入
                profit: 0 //利润
            },
            select_company: '',
            time: '', //时间
            //日期选择框
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() > Date.now();
                },
                shortcuts: [
                    {
                        text: '今天',
                        onClick(picker) {
                            picker.$emit('pick', new Date());
                        }
                    },
                    {
                        text: '昨天',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24);
                            picker.$emit('pick', date);
                        }
                    },
                    {
                        text: '一周前',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', date);
                        }
                    }
                ]
            }
        };
    }, // 方法
    methods: {
        select_reset() {
            this.select_company = null;
            this.time = null;
            this.getData();
        },
        time_reset() {
            console.log("1111");
            if (!this.time) {
                this.time = null;
                this.getData();
            }
        },
        // 获取全部按照月份统计的数据
        // 当前页大小
        handleSizeChange(val) {
            this.pagesize = val;
        }, // 当前页
        handleCurrentChange(val) {
            this.currentPage = val;
        },
        getData() {
            this.$axios({
                method: 'get',
                url: 'statistics/everyDay-query-all',
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' } //加上这个
            }).then((res) => {
                console.log(res.data);
                if (res.data.code == 1) {
                    this.everyDayList = res.data.data;
                    // if(res.data.data.){

                    // }
                    this.length = this.everyDayList.length;
                } else {
                    this.$message.error(res.data.mess);
                }
            });
        },
        //每日结算
        sum() {
            this.$axios({
                method: 'get',
                url: 'statistics/everyDay',
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
            })
                .then((res) => {
                    if (res.data.code === 1) {
                        this.$everyDayList = res.data.data;
                        this.$message.success('结算成功！');
                        this.getData();
                    } else {
                        this.$message.info('结算失败！');
                    }
                })
                .catch((error) => {});
        },
        //按照时间进行搜索
        handleSearch() {
            if (this.time != '') {
                if (!this.select_company) {
                    let param = new URLSearchParams();
                    param.append('time', this.time);
                    this.$axios({
                        method: 'post',
                        url: 'statistics/day',
                        data: param,
                        headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
                    }).then((res) => {
                        if (res.data.code == 1) {
                            this.everyDayList = res.data.data;
                        }else {
                            this.$message.error('查询信息不存在！');
                        }
                    });
                } else {
                    let param = new URLSearchParams();
                    param.append('time', this.time);
                    param.append('company_name', this.select_company);
                    this.$axios({
                        method: 'post',
                        url: 'statistics/everyDay-Company',
                        data: param,
                        headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
                    }).then((res) => {
                        if (res.data.code == 1&&res.data.data.length>0) {
                                this.$message.success('查询成功！');
                                this.everyDayList = res.data.data;
                        } else {
                            this.$message.error('查询信息不存在！');
                        }
                    });
                }
            } else {
                const h = this.$createElement;
                this.$notify({
                    title: '输入的内容出错',
                    message: h('i', { style: 'color: teal' }, '请输入正确的查询条件')
                });
            }
        }
    }, // 页面初始化生命周期函数
    created() {
        this.getData();
    }
};
</script>
// 样式
<style >
.demo-table-expand {
    font-size: 5;
}
.demo-table-expand label {
    width: 90px;
    color: #1b1e22;
    font-weight: 600;
}
.demo-table-expand span {
    color: blue;
    font-weight: 400;
}
.demo-table-expand span span{
    color: blue;
    font-weight: 400;
}
.demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 10;
    width: 50%;
}
</style>